<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
       *{margin: 0;padding: 0}
        .box{width: 100px;height: 100px;position: relative;margin: 100px auto;transition: transform .8s ease }
        .one{width: 90px;height: 8px;background: #000;position: absolute;top: 20px;left: 5px;transition: all .8s ease}
        .two{width: 90px;height: 8px;background: #000;position: absolute;top: 50px;left: 5px;transition: all .8s ease}
        .three{width: 90px;height: 8px;background: #000;position: absolute;top: 80px;left: 5px;transition: all .8s ease}

    </style>
</head>
<body>
<div class="box" id="box">
    <span class="one" id="one"></span>
    <span class="two" id="two"></span>
    <span class="three" id="three"></span>
</div>
</body>
<script>
    window.onload =function(){
        var box = document.getElementById('box');
        var one = document.getElementById('one');
        var two = document.getElementById('two');
        var three = document.getElementById('three');
        var type = true;
        box.onclick = function(){
            if(type){
//                this.style.transform = 'rotate(360deg)';
                one.style.top = '50px';
                one.style.transform = 'rotate(45deg)';
                three.style.top = '50px';
                three.style.transform = 'rotate(-45deg)';
                two.style.opacity = 0;
                type = false
            }else{
//                this.style.transform = 'rotate(-360deg)';
                one.style.top = '20px';
                one.style.transform = 'rotate(0deg)';
                three.style.top = '80px';
                three.style.transform = 'rotate(0deg)';
                two.style.opacity = 1;
                type = true
            }
            }

    }
</script>
</html>